<template>
	<view class="">
		<u-navbar :is-back="true" :border-bottom="false" title="资料修改" height="46" title-color="#333" :title-bold="true"
		 :title-size="36">
		</u-navbar>
		<view class="modify_tips">
			请确认你的个人信息，若有误请点击修改
		</view>
		<view class="modify_box">
			<u-form :model="form" ref="uForm" :error-type="errorType">
				<u-form-item :label-style="labelStyle" label="企业名称" prop="intro" label-width="150">
					<u-input v-model="form.intro" placeholder="请输入企业名称" />
				</u-form-item>
				<u-form-item :label-style="labelStyle" label="法人代表" prop="name" label-width="150">
					<u-input v-model="form.name" placeholder="请输入法人代表" />
				</u-form-item>
				<u-form-item :label-style="labelStyle" label="手机号码" prop="phone" label-width="150">
					<u-input placeholder="请输入手机号" v-model="form.phone" type="number"></u-input>
				</u-form-item>
				<u-form-item :label-style="labelStyle" label="所在地区" prop="region" label-width="150">
					<u-input type="select" :select-open="pickerShow" v-model="form.region" placeholder="请选择地区" @click="pickerShow = true"></u-input>
				</u-form-item>
				<u-form-item :label-style="labelStyle" label="身份证号" prop="sfzh" label-width="150">
					<u-input placeholder="请输入身份证号" v-model="form.sfzh"></u-input>
				</u-form-item>
				<u-form-item :label-style="labelStyle" label="营业执照副本" label-position="top" prop="photo" label-width="150" class="photo">
					<u-upload :action="action" width="160" height="160" :auto-upload="false" :max-size="5 * 1024 * 1024" max-count="6"></u-upload>
					<text>(注意：也可提供监管部门认可的具有营业执照同等效力的证件)</text>
				</u-form-item>
			</u-form>
			<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
			<u-button @click="submit" :custom-style="{backgroundColor:'#DC3129',color:'#fff',marginTop:'50rpx',height: '70rpx',fontSize: '26rpx',width: '600rpx',borderRadius: '10rpx'}">确认修改</u-button>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					intro: '',
					phone: '',
					region: '',
					sfzh: '',
				},
				errorType: ['border-bottom'],
				labelStyle: {
					fontSize: '26rpx',
					color: '#000',
				},
				pickerShow: false,
				action: 'http://www.artisanchn.com',
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					intro: [{
						min: 5,
						message: '简介不能少于5个字',
						trigger: 'change'
					}],
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					],
					sfzh: [{
							required: true,
							message: '请输入身份证号',
							trigger: ['change', 'blur'],
						},
						{
							pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '身份证号不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					]
				}
			};
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
				
				});
			},
			regionConfirm(e) {
				this.form.region = e.province.label + '/' + e.city.label + '/' + e.area.label;
			},
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>

<style scoped lang="scss">
	.modify_tips {
		height: 80rpx;
		width: 100vw;
		background-color: #F7F7F7;
		line-height: 80rpx;
		padding: 0 30rpx;
		color: #999999;
		font-size: 22rpx;
	}

	.modify_box {
		padding: 0 30rpx;


	}

	.photo {
		/deep/.u-form-item--right__content__slot {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
		}

		text {
			font-size: 20rpx;
			color: #999999;
		}
	}
</style>
